<template>
    <div class="innovation-container page-container">
        <!-- 主体内容区 -->
        <div class="main-content">
            <!-- 左侧数据区 -->
            <div class="left-section">
                <!-- 创新指数仪表盘 -->
                <div class="panel-item">
                    <div class="panel-title">
                        <span class="icon">🚀</span>
                        创新活力指数
                    </div>
                    <div class="innovation-gauge">
                        <div class="gauge-container" ref="gaugeChart"></div>
                        <div class="gauge-stats">
                            <div class="stat-item" v-for="(stat, index) in innovationStats" :key="index">
                                <div class="stat-icon">{{ stat.icon }}</div>
                                <div class="stat-content">
                                    <div class="stat-value">{{ stat.value }}</div>
                                    <div class="stat-label">{{ stat.label }}</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 创新人才分布 -->
                <div class="panel-item">
                    <div class="panel-title">
                        <span class="icon">👨‍💻</span>
                        创新人才分布
                    </div>
                    <div class="talent-distribution">
                        <el-progress 
                            v-for="(talent, index) in talentDistribution" 
                            :key="index"
                            :percentage="talent.percentage" 
                            :color="talent.color"
                            :stroke-width="12"
                            :show-text="false"
                            class="talent-progress"
                        />
                        <div class="talent-labels">
                            <div class="talent-label" v-for="(talent, index) in talentDistribution" :key="index">
                                <span class="label-color" :style="{ backgroundColor: talent.color }"></span>
                                <span class="label-text">{{ talent.type }}</span>
                                <span class="label-count">{{ talent.count }}</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 中间展示区 -->
            <div class="center-section">
                <!-- 创新生态圈 -->
                <div class="innovation-ecosystem">
                    <div class="ecosystem-header">
                        <span class="icon">🌐</span>
                        广州创新生态圈
                    </div>
                    <div class="ecosystem-map" ref="ecosystemMap"></div>
                </div>

                <!-- 创新成果展示 -->
                <div class="innovation-showcase">
                    <el-carousel height="260px" :interval="3000"  indicator-position="outside">
                        <el-carousel-item v-for="(achievement, index) in innovationAchievements" :key="index">
                            <div class="achievement-card">
                                <div class="achievement-header">
                                    <div class="achievement-icon">{{ achievement.icon }}</div>
                                    <div class="achievement-title">{{ achievement.title }}</div>
                                </div>
                                <div class="achievement-content">
                                    <div class="achievement-desc">{{ achievement.desc }}</div>
                                    <div class="achievement-metrics">
                                        <div class="metric-item" v-for="(metric, mIndex) in achievement.metrics" :key="mIndex">
                                            <div class="metric-value">{{ metric.value }}</div>
                                            <div class="metric-label">{{ metric.label }}</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </el-carousel-item>
                    </el-carousel>
                </div>
            </div>

            <!-- 右侧数据区 -->
            <div class="right-section">
                <!-- 研发投入趋势 -->
                <div class="panel-item">
                    <div class="panel-title">
                        <span class="icon">📊</span>
                        研发投入趋势
                    </div>
                    <div class="rd-trend-chart" ref="rdTrendChart"></div>
                </div>
                
                <!-- 专利申请统计 -->
                <div class="panel-item">
                    <div class="panel-title">
                        <span class="icon">📋</span>
                        专利申请统计
                    </div>
                    <div class="patent-chart" ref="patentChart"></div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, onMounted, nextTick } from 'vue'
import * as echarts from 'echarts'
import { ElCarousel, ElCarouselItem, ElProgress } from 'element-plus'

// 创新统计数据
const innovationStats = ref([
    { icon: '💡', value: '15.2万', label: '专利申请量' },
    { icon: '🏢', value: '2.8万家', label: '高新技术企业' },
    { icon: '🎓', value: '85万人', label: '研发人员' },
    { icon: '💰', value: '3.2%', label: '研发投入占比' }
])

// 创新成果展示
const innovationAchievements = ref([
    {
        icon: '🚀',
        title: '航天科技突破',
        desc: '广州航天科技集团成功发射多颗商业卫星，推动航天产业化发展',
        metrics: [
            { value: '12颗', label: '商业卫星' },
            { value: '85%', label: '国产化率' },
            { value: '50亿', label: '产值规模' }
        ]
    },
    {
        icon: '🧬',
        title: '生物医药创新',
        desc: '广州生物医药产业园区集聚全球顶尖研发团队，推动新药研发',
        metrics: [
            { value: '156个', label: '在研新药' },
            { value: '23个', label: '获批上市' },
            { value: '1200亿', label: '产业规模' }
        ]
    },
    {
        icon: '🤖',
        title: '人工智能应用',
        desc: '广州AI产业快速发展，在自动驾驶、智能制造等领域取得突破',
        metrics: [
            { value: '280家', label: 'AI企业' },
            { value: '15个', label: '应用场景' },
            { value: '800亿', label: '市场规模' }
        ]
    },
    {
        icon: '🌱',
        title: '绿色技术创新',
        desc: '广州在新能源、环保技术等领域引领绿色发展潮流',
        metrics: [
            { value: '45%', label: '清洁能源' },
            { value: '320项', label: '环保专利' },
            { value: '95%', label: '达标率' }
        ]
    },
    {
        icon: '📱',
        title: '数字经济创新',
        desc: '广州数字经济发展迅速，在电商、金融科技等领域领先全国',
        metrics: [
            { value: '2.8万亿', label: '数字经济' },
            { value: '85%', label: '数字化率' },
            { value: '1200万', label: '用户规模' }
        ]
    }
])

// 创新人才分布
const talentDistribution = ref([
    { type: '研发工程师', count: '45万人', percentage: 45, color: '#00a1ff' },
    { type: '科学家', count: '12万人', percentage: 12, color: '#00ff88' },
    { type: '创业者', count: '18万人', percentage: 18, color: '#ff6b6b' },
    { type: '技术专家', count: '15万人', percentage: 15, color: '#ffd700' },
    { type: '创新管理', count: '10万人', percentage: 10, color: '#9370db' }
])

// 图表实例
const gaugeChart = ref<HTMLElement | null>(null)
const ecosystemMap = ref<HTMLElement | null>(null)
const rdTrendChart = ref<HTMLElement | null>(null)
const patentChart = ref<HTMLElement | null>(null)

const gaugeChartInstance = ref<echarts.ECharts | null>(null)
const ecosystemMapInstance = ref<echarts.ECharts | null>(null)
const rdTrendChartInstance = ref<echarts.ECharts | null>(null)
const patentChartInstance = ref<echarts.ECharts | null>(null)

// 广州创新生态地图数据
const innovationMapData = ref([
    { name: '天河区', value: 95, innovation: '科技金融中心', companies: 2800, labs: 45 },
    { name: '黄埔区', value: 92, innovation: '智能制造基地', companies: 3200, labs: 52 },
    { name: '南沙区', value: 88, innovation: '自贸试验区', companies: 1800, labs: 28 },
    { name: '番禺区', value: 85, innovation: '大学城科技园', companies: 2200, labs: 35 },
    { name: '白云区', value: 82, innovation: '航空产业基地', companies: 1600, labs: 25 },
    { name: '花都区', value: 80, innovation: '汽车产业基地', companies: 1400, labs: 22 },
    { name: '增城区', value: 78, innovation: '新材料产业园', companies: 1200, labs: 18 },
    { name: '从化区', value: 75, innovation: '生态科技园', companies: 800, labs: 12 },
    { name: '越秀区', value: 90, innovation: '文化创意中心', companies: 1500, labs: 20 },
    { name: '海珠区', value: 87, innovation: '数字创意园', companies: 1900, labs: 30 },
    { name: '荔湾区', value: 83, innovation: '传统产业升级', companies: 1100, labs: 15 },
    { name: '白云区', value: 82, innovation: '航空产业基地', companies: 1600, labs: 25 }
])

// 初始化图表
onMounted(() => {
    nextTick(() => {
        setTimeout(() => {
            initCharts();
        }, 100);
    });
})

const initCharts = () => {
    // 创新活力指数仪表盘
    if (gaugeChart.value) {
        const chart = echarts.init(gaugeChart.value)
        gaugeChartInstance.value = chart;
        chart.setOption({
            series: [{
                type: 'gauge',
                startAngle: 200,
                endAngle: -20,
                min: 0,
                max: 100,
                splitNumber: 8,
                radius: '90%',
                itemStyle: {
                    color: '#00d4ff'
                },
                progress: {
                    show: true,
                    roundCap: true,
                    width: 20,
                    itemStyle: {
                        color: {
                            type: 'linear',
                            x: 0,
                            y: 0,
                            x2: 1,
                            y2: 0,
                            colorStops: [{
                                offset: 0, color: '#00a1ff'
                            }, {
                                offset: 0.5, color: '#00ff88'
                            }, {
                                offset: 1, color: '#ffd700'
                            }]
                        }
                    }
                },
                pointer: {
                    show: false
                },
                axisLine: {
                    roundCap: true,
                    lineStyle: {
                        width: 20,
                        color: [[1, 'rgba(255, 255, 255, 0.1)']]
                    }
                },
                axisTick: {
                    show: false
                },
                splitLine: {
                    length: 15,
                    lineStyle: {
                        width: 3,
                        color: '#999'
                    }
                },
                axisLabel: {
                    distance: 25,
                    color: '#999',
                    fontSize: 12,
                    formatter: function(value: number) {
                        return value + '';
                    }
                },
                title: {
                    offsetCenter: [0, '20%'],
                    fontSize: 16,
                    color: '#fff',
                    fontWeight: 'bold'
                },
                detail: {
                    fontSize: 24,
                    offsetCenter: [0, '-10%'],
                    valueAnimation: true,
                    formatter: function (value: number) {
                        return Math.round(value) + '';
                    },
                    color: '#00d4ff',
                    fontWeight: 'bold'
                },
                data: [{
                    value: 92.5,
                    name: '创新活力指数'
                }]
            }]
        })
        
        setTimeout(() => {
            chart.resize();
        }, 50);
    }

    // 研发投入趋势图表
    if (rdTrendChart.value) {
        const chart = echarts.init(rdTrendChart.value)
        rdTrendChartInstance.value = chart;
        chart.setOption({
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'cross',
                    label: {
                        backgroundColor: '#6a7985'
                    }
                }
            },
            legend: {
                data: ['研发投入', 'GDP占比'],
                textStyle: { color: '#fff' }
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: [
                {
                    type: 'category',
                    boundaryGap: false,
                    data: ['2019', '2020', '2021', '2022', '2023', '2024'],
                    axisLabel: { color: '#fff' }
                }
            ],
            yAxis: [
                {
                    type: 'value',
                    name: '投入金额(亿元)',
                    axisLabel: { color: '#fff' }
                },
                {
                    type: 'value',
                    name: '占比(%)',
                    axisLabel: { color: '#fff' }
                }
            ],
            series: [
                {
                    name: '研发投入',
                    type: 'line',
                    stack: 'Total',
                    areaStyle: {
                        color: {
                            type: 'linear',
                            x: 0,
                            y: 0,
                            x2: 0,
                            y2: 1,
                            colorStops: [{
                                offset: 0, color: 'rgba(0, 161, 255, 0.3)'
                            }, {
                                offset: 1, color: 'rgba(0, 161, 255, 0.1)'
                            }]
                        }
                    },
                    emphasis: {
                        focus: 'series'
                    },
                    data: [1200, 1350, 1580, 1820, 2100, 2450],
                    itemStyle: {
                        color: '#00a1ff'
                    }
                },
                {
                    name: 'GDP占比',
                    type: 'line',
                    yAxisIndex: 1,
                    data: [2.8, 3.0, 3.2, 3.4, 3.6, 3.8],
                    itemStyle: {
                        color: '#00ff88'
                    }
                }
            ]
        })
        
        setTimeout(() => {
            chart.resize();
        }, 50);
    }

    // 专利申请统计图表
    if (patentChart.value) {
        const chart = echarts.init(patentChart.value)
        patentChartInstance.value = chart;
        chart.setOption({
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                }
            },
            legend: {
                data: ['发明专利', '实用新型', '外观设计'],
                textStyle: { color: '#fff' }
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: {
                type: 'category',
                data: ['2019', '2020', '2021', '2022', '2023', '2024'],
                axisLabel: { color: '#fff' }
            },
            yAxis: {
                type: 'value',
                axisLabel: { color: '#fff' }
            },
            series: [
                {
                    name: '发明专利',
                    type: 'bar',
                    data: [8500, 9200, 10800, 12500, 14200, 15800],
                    itemStyle: {
                        color: '#00a1ff'
                    }
                },
                {
                    name: '实用新型',
                    type: 'bar',
                    data: [12000, 13500, 15200, 16800, 18500, 20200],
                    itemStyle: {
                        color: '#00ff88'
                    }
                },
                {
                    name: '外观设计',
                    type: 'bar',
                    data: [6800, 7200, 8500, 9200, 10800, 12000],
                    itemStyle: {
                        color: '#ff6b6b'
                    }
                }
            ]
        })
        
        setTimeout(() => {
            chart.resize();
        }, 50);
    }

    // 广州创新生态地图
    if (ecosystemMap.value) {
        const chart = echarts.init(ecosystemMap.value)
        ecosystemMapInstance.value = chart;
        
        // 注册广州地图
        fetch('/public/map-geojson/guangzhou.json')
            .then(response => response.json())
            .then(guangzhouJson => {
                echarts.registerMap('guangzhou', guangzhouJson);
                
                chart.setOption({
                    tooltip: {
                        trigger: 'item',
                        formatter: function(params: any) {
                            if (params.data) {
                                return `
                                    <div style="padding: 10px;">
                                        <div style="font-size: 16px; font-weight: bold; color: #00d4ff; margin-bottom: 8px;">
                                            ${params.name}
                                        </div>
                                        <div style="margin-bottom: 5px;">
                                            <span style="color: #00ff88;">创新指数:</span> ${params.data.value}分
                                        </div>
                                        <div style="margin-bottom: 5px;">
                                            <span style="color: #00a1ff;">特色:</span> ${params.data.innovation}
                                        </div>
                                        <div style="margin-bottom: 5px;">
                                            <span style="color: #ff6b6b;">企业:</span> ${params.data.companies}家
                                        </div>
                                        <div>
                                            <span style="color: #ffd700;">实验室:</span> ${params.data.labs}个
                                        </div>
                                    </div>
                                `;
                            }
                            return params.name;
                        }
                    },
                    visualMap: {
                        min: 70,
                        max: 100,
                        left: 'left',
                        top: 'bottom',
                        text: ['高', '低'],
                        calculable: true,
                        inRange: {
                            color: ['#1e3a8a', '#3b82f6', '#06b6d4', '#10b981', '#84cc16']
                        },
                        textStyle: {
                            color: '#fff'
                        }
                    },
                    series: [
                        {
                            name: '广州创新生态',
                            type: 'map',
                            map: 'guangzhou',
                            roam: true,
                            zoom: 1.2,
                            center: [113.280637, 23.125178],
                            itemStyle: {
                                areaColor: '#2d3748',
                                borderColor: '#00d4ff',
                                borderWidth: 1
                            },
                            emphasis: {
                                itemStyle: {
                                    areaColor: '#00d4ff',
                                    shadowColor: 'rgba(0, 212, 255, 0.5)',
                                    shadowBlur: 20
                                }
                            },
                            label: {
                                show: true,
                                fontSize: 12,
                                color: '#fff',
                                fontWeight: 'bold'
                            },
                            data: innovationMapData.value
                        }
                    ]
                });
            })
            .catch(error => {
                console.error('加载广州地图失败:', error);
                // 如果地图加载失败，显示备用内容
                chart.setOption({
                    title: {
                        text: '广州创新生态地图',
                        left: 'center',
                        top: 'center',
                        textStyle: {
                            color: '#00d4ff',
                            fontSize: 18
                        }
                    },
                    graphic: {
                        type: 'text',
                        left: 'center',
                        top: '60%',
                        style: {
                            text: '地图加载中...',
                            fill: '#fff',
                            fontSize: 14
                        }
                    }
                });
            });
        
        setTimeout(() => {
            chart.resize();
        }, 50);
    }
}
</script>

<style scoped lang="scss">
.innovation-container {
    background: linear-gradient(135deg, #0c1426 0%, #1a2332 50%, #2d3748 100%);
    color: #fff;
    display: flex;
    flex-direction: column;
    gap: 20px;

    .main-content {
        height: 100%;
        overflow: auto;
        flex: 1;
        display: flex;
        gap: 20px;

        .left-section, .right-section {
            width: 30%;
            display: flex;
            flex-direction: column;
            gap: 20px;

            .panel-item {
                overflow-x: hidden;
                overflow-y: auto;
                background: rgba(255, 255, 255, 0.08);
                border-radius: 15px;
                padding: 20px;
                backdrop-filter: blur(15px);
                border: 1px solid rgba(255, 255, 255, 0.1);
                flex: 1;

                .panel-title {
                    font-size: 18px;
                    margin-bottom: 20px;
                    color: #00d4ff;
                    display: flex;
                    align-items: center;
                    gap: 10px;
                    font-weight: 600;

                    .icon {
                        font-size: 24px;
                    }
                }

                .innovation-gauge {
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    gap: 20px;

                    .gauge-container {
                        width: 200px;
                        height: 150px;
                    }

                    .gauge-stats {
                        display: grid;
                        grid-template-columns: repeat(2, 1fr);
                        gap: 15px;
                        width: 100%;

                        .stat-item {
                            display: flex;
                            align-items: center;
                            gap: 10px;
                            padding: 10px;
                            background: rgba(255, 255, 255, 0.05);
                            border-radius: 8px;

                            .stat-icon {
                                font-size: 20px;
                                width: 40px;
                                height: 40px;
                                display: flex;
                                align-items: center;
                                justify-content: center;
                                background: rgba(0, 212, 255, 0.1);
                                border-radius: 8px;
                            }

                            .stat-content {
                                flex: 1;

                                .stat-value {
                                    font-size: 16px;
                                    font-weight: bold;
                                    color: #00d4ff;
                                    margin-bottom: 2px;
                                }

                                .stat-label {
                                    font-size: 12px;
                                    color: #a0a0a0;
                                }
                            }
                        }
                    }
                }

                .talent-distribution {
                    .talent-progress {
                        margin-bottom: 15px;
                        
                        :deep(.el-progress-bar__outer) {
                            background: rgba(255, 255, 255, 0.1);
                        }
                    }

                    .talent-labels {
                        .talent-label {
                            display: flex;
                            align-items: center;
                            gap: 10px;
                            margin-bottom: 10px;

                            .label-color {
                                width: 12px;
                                height: 12px;
                                border-radius: 2px;
                            }

                            .label-text {
                                flex: 1;
                                font-size: 14px;
                            }

                            .label-count {
                                font-size: 12px;
                                color: #00d4ff;
                                font-weight: bold;
                            }
                        }
                    }
                }

                .rd-trend-chart,
                .patent-chart {
                    height: calc(100% - 60px);
                }
            }
        }

        .center-section {
            flex: 1;
            display: flex;
            flex-direction: column;
            gap: 20px;

            .innovation-ecosystem {
                height: 570px;
                background: rgba(255, 255, 255, 0.08);
                border-radius: 15px;
                padding: 20px;
                backdrop-filter: blur(15px);
                border: 1px solid rgba(255, 255, 255, 0.1);

                .ecosystem-header {
                    font-size: 20px;
                    font-weight: 600;
                    color: #00d4ff;
                    margin-bottom: 20px;
                    display: flex;
                    align-items: center;
                    gap: 10px;

                    .icon {
                        font-size: 28px;
                    }
                }

                .ecosystem-map {
                    height: calc(100% - 50px);
                }
            }

            .innovation-showcase {
                height: calc(100% - 600px);
                // flex: 1;
                background: rgba(255, 255, 255, 0.08);
                border-radius: 15px;
                padding: 20px;
                backdrop-filter: blur(15px);
                border: 1px solid rgba(255, 255, 255, 0.1);

                :deep(.el-carousel) {
                    .el-carousel__container {
                        border-radius: 10px;
                        overflow: hidden;
                    }

                    .el-carousel__arrow {
                        background-color: rgba(0, 212, 255, 0.7);
                        
                        &:hover {
                            background-color: rgba(0, 212, 255, 0.9);
                        }
                    }

                    .el-carousel__indicators {
                        .el-carousel__button {
                            background-color: rgba(0, 212, 255, 0.7);
                        }
                    }
                }

                .achievement-card {
                    display: flex;
                    flex-direction: column;
                    justify-content: space-between;
                    height: 100%;
                    padding: 20px;
                    background: linear-gradient(135deg, rgba(0, 212, 255, 0.1), rgba(0, 161, 255, 0.05));
                    border-radius: 10px;
                    border: 1px solid rgba(0, 212, 255, 0.2);

                    .achievement-header {
                        display: flex;
                        align-items: center;
                        gap: 15px;
                        margin-bottom: 20px;

                        .achievement-icon {
                            font-size: 32px;
                            width: 60px;
                            height: 60px;
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            background: rgba(0, 212, 255, 0.1);
                            border-radius: 50%;
                        }

                        .achievement-title {
                            font-size: 20px;
                            font-weight: 600;
                            color: #00d4ff;
                        }
                    }

                    .achievement-content {
                        .achievement-desc {
                            font-size: 14px;
                            color: rgba(255, 255, 255, 0.8);
                            line-height: 1.6;
                            margin-bottom: 20px;
                        }

                        .achievement-metrics {
                            display: grid;
                            grid-template-columns: repeat(3, 1fr);
                            gap: 15px;

                            .metric-item {
                                text-align: center;
                                padding: 15px;
                                background: rgba(255, 255, 255, 0.05);
                                border-radius: 8px;

                                .metric-value {
                                    font-size: 18px;
                                    font-weight: bold;
                                    color: #00d4ff;
                                    margin-bottom: 5px;
                                }

                                .metric-label {
                                    font-size: 12px;
                                    color: #a0a0a0;
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}

@keyframes pulse {
    0%, 100% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
    50% {
        opacity: 0.8;
        transform: translate(-50%, -50%) scale(1.05);
    }
}
</style>